[JavaScript] JS 인터프리터언어, 기본 문법

✅ JavaScript - 인터프리터 언어? 컴파일 언어?

📌 인터프리터 언어

인터프리터 언어는 원시코드(소스코드)를 기계어로 변환하는 과정 없이 한줄 한줄 해석하여 명령어를 실행하는 언어를 말합니다. R, Python, Ruby와 같은 언어들이 대표적인 인터프리터 언어입니다.

인터프리터가 한 줄씩 읽고 따로 기계어로 변환하지 않기 때문에 빌드시간이 없습니다. 런타임 상황에서는 한 줄씩 실시간으로 코드를 읽어서 실행하기 때문에 컴파일 언어에 비해 속도가 느립니다.

실행속도는 느리지만 코드 변경시 빌드 과정 없이 바로 실행이 가능하다는 장점이 있습니다.

📌 컴파일 언어

컴파일 언어는 원시코드(소스코드)를 기계어로 변환한 후에 코드를 실행합니다. 소스코드를 기계어로 번역하는 빌드 과정에서 인터프리터 언어에 비해 시간이 소요됩니다. 그러나 런타임 상황에서는 모든 소스코드가 기계어로 변환되어 있기 때문에 더 빠르게 실행가능합니다. 대표적인 언어로 C,C++,C# 등이 있습니다. exam.c -> exam.exe 로 변경되는 것을 컴파일 이라고 합니다.

🔔 하이브리드 언어

예외적으로 Java는 하이브리드 언어로 불립니다. 즉, 컴파일 언어이면서 인터프리터 언어이기도 합니다. .java로 표현되는 소스코드는 Java Compiler를 통해 .class 파일로 변환 됩니다. .class파일은 JVM은 이해할 수 있지만 아직 컴퓨터가 읽을 수는 없는 바이트 코드 파일입니다. 이후 컴파일된 바이트 코드를 JVM의 Class Loader에 전달합니다. Class Loader는 이를 JVM의 메모리에 올리고, 실행엔진(Execution Engine)이 JVM 메모리에 올라온 바이트 코드들을 명령어 단위로 하나씩 가져와서 실행합니다. 이때 실행엔진은 인터프리터와 컴파일 방식, 두가지 방식으로 실행됩니다.

📌 JS는 인터프리터 언어이다!

JS는 웹 브라우저에서 실행한다. 모든 웹 브라우저에는 JS 인터프리터가 탑재되어 있고, JS 인터프리터를 통해 JS 코드를 한줄 한줄 읽고 실행한다.

[웹 브라우저 별 JS 인터프리터]

• 크롬 : V8 -> 이걸 따로 떼어내서 출시한 JS 인터프리터가 Node.js
• 엣지 : Chakra
• 사파리 : Webkit
• 파이어폭스 : SpiderMonkey
  

JS를 웹브라우저 없이 서버딴에서 실행이 가능한데 이러면 인터프리터를 설치해줘야 한다. 그때 Node.js를 설치해서 사용하면 된다..!

✅ JS 기본 문법

📌 JS 코드 작성 요령

1. 코드 들여쓰기
2. 세미콜론으로 구분하자. JS는 세미콜론을 붙이지 않아도 실행되긴 한다. 그러나 디버깅을 위해 세미콜론을 반드시 붙이는 습관을 들이자.
3. 공백을 넣어 읽기 쉽게 작성하자.
4. 소스코드를 설명하는 주석을 작성하자.
5. 식별자는 규칙을 지켜 작성하자. 반드시 영문자나 _ , $ 로 시작하고 대소문자를 구분하며 단어사이에 공백을 넣지말자.

📌 JS 기본 입출력 방법

• 알림창 : 웹 브라우저에 알림창을 띄워줍니다.

  기본형 - alert(메시지);

See the Pen JS by username (@username) on CodePen.

• 확인창 : 메시지를 보여주고 확인/취소 버튼을 클릭할 수 있습니다.

  기본형 - confirm(메시지);

See the Pen JS by username (@username) on CodePen.

• 프롬프트 창 : 텍스트 필드가 있는 창을 제공합니다.

  기본형 - prompt(메시지) 또는 prompt(메시지, 기본값)

See the Pen JS by username (@username) on CodePen.

• document.write() : 웹 문서(document)에서 괄호안의 내용을 표시하는 명령문

  기본형 - document.write(“메시지” 또는 ‘메시지’ 또는 내용

See the Pen JS by username (@username) on CodePen.

• console.log() : 괄호안의 내용을 콘솔 창에 표시합니다.

  **기본형 - console.log(변수

  텍스트);**

See the Pen JS by username (@username) on CodePen.

웹브라우저에서 개발자도구를 통해 콘솔을 보면 아래 사진처럼 console.log에 입력한 내용이 출력됩니다.

✅ 개발자 도구로 디버깅하기

1. 웹 브라우저에서 소스 코드 실행
2. F12눌러서 개발자 도구 실행
3. Console 탭으로 이동 후 에러 확인
4. 에러를 클릭하면 에러가 발생한 코드로 이동!